<template>
	<view class="my">
		<view class="bar">
		</view>
		<u-image class="setting"  src="@/static/offline/my/setting.png" mode="" width="35rpx" height="35rpx" style="margin-left: 20rpx;"  @click="toInfo('/pages/offline/my/setting')"></u-image>
		<view class="top-info">
			<view class="base-info">
				<view class="u-flex u-font-32">
					<view class="user-box">
						<u-image style="border-radius: 50%;overflow: hidden;" src="@/static/my/shang.jpg" mode="" width="126rpx" height="126rpx"></u-image>
						<u-image v-show="!accountState" style="margin-top: -12rpx" src="@/static/my/account-1.png" mode="" width="108rpx" height="33rpx"></u-image>
						<u-image v-show="accountState" style="margin-top: -12rpx" src="@/static/my/account-2.png" mode="" width="108rpx" height="33rpx"></u-image>
					</view>
					<view class="u-flex-1" style="min-width:0">
						<view style="min-width:0" class="bus-name u-font-32 u-line-1">{{sellerName}}</view>
						<view class="u-flex level">
							<view class="u-font-24 level-text" @click="changeRole">
								{{type}}
								<u-image class="level-img" src="@/static/my/icon-around.png" mode="" width="30rpx" height="30rpx"></u-image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="u-flex base-info-other">
				<view class="u-flex-1 item" @click="toInfo('/pages/line/my/accountInfo')">
					<view class="">{{ count}}</view>
					<view>糖果余额</view>
				</view>
				<view class="line"></view>
				<view class="u-flex-1 item" @click="toInfo('/pages/line/my/goldenBeanDetail')">
					<view class="">{{ goldenBeanCount }}</view>
					<view>金豆余额</view>
				</view>
				<view class="line"></view>
				<view class="u-flex-1 item" @click="toInfo('/pages/line/my/withdrawal')">
					<view class="">{{ availableAmount}}</view>
					<view>现金余额</view>
				</view>
			</view>
		</view>
		<view class="info-content u-flex u-row-around">
			<view class="info-content-item" v-for="(item,index) in INFOLIST" :key="index" @click="toInfo(item.url)">
				<u-image style="margin: auto;" :src="item.icon" width="48rpx" height="48rpx"></u-image>
				<view class="info-content-item-text">{{item.text}}</view>
			</view>
		</view>
		<!-- <view class="cell-content">
			<view class="group-title">商品订单</view>
			<u-cell-item  title="订单列表"  @click="toOrder">
				<view slot="icon">
					<u-image style="margin-right: 20rpx;" src="@/static/my/order.png" width="54rpx" height="54rpx"></u-image>
				</view>
			</u-cell-item>
			<u-cell-item  title="售后单" @click="toAfterSale">
				<view slot="icon">
					<u-image style="margin-right: 20rpx;" src="@/static/my/shouhou.png" width="54rpx" height="54rpx"></u-image>
				</view>
			</u-cell-item>
		</view> -->
		<view class="meun-list">
			<view class="cell-content" v-for="(item, index) in MY_MENU" :key="index" :style="[{height: item.show ? `${item.children.length * 106 + 106}rpx` : '106rpx',transition:'height .5s'}]">
				<view class="group-title u-flex" @click="item.show = !item.show">
					<view class="u-flex-1">
						{{item.name}}
					</view>
					<u-icon name="arrow-down" :style="[{transform: item.show ? 'rotate(-180deg)' : 'rotate(0)',transition:'transform .5s'}]"></u-icon>
				</view>
				<!-- :class="[item.show?'anim-open': 'anim']" -->
				<div  class="cell-box">
					<u-cell-item :title="child.name"  v-for="(child, childIndex) in item.children" :key="childIndex" :border-bottom="false"  @click="toInfo(child.href)">
						<view slot="icon">
							<u-image style="margin-right: 20rpx;" :src="child.icon_url" width="54rpx" height="54rpx"></u-image>
						</view>
					</u-cell-item>
				</div>
			</view>
		</view>
	</view>
</template>
<script>
import constData from './data.js'
export default {
	data() {
		return {
			sellerName: '',
			// showSweetRemainder: true,
			// showCashRemainder: true,
			availableAmount: 0,
			count: 0,
			accountState: '', // 商户状态
			INFOLIST: [{
				text: '基本信息',
				icon: require('@/static/my/base1.png'),
				url: './baseInfo'
			}, {
				text: '法人执照',
				icon: require('@/static/my/base2.png'),
				url: './legalPerson'
			}, {
				text: '商户证照',
				icon: require('@/static/my/base3.png'),
				url: './merchantPhoto'
			}, {
				text: '绑卡结算',
				icon: require('@/static/my/base4.png'),
				url: './merchantCard'
			}, {
				text: '基本配置',
				icon: require('@/static/my/base5.png'),
				url: './baseConfing'
			}],
			mid: '',
			MY_MENU: constData.MY_MENU,
			type: '',
			goldenBeanCount: 0,
		}
	},
	onLoad() {
		console.log(this.MY_MENU)
		let roleType = uni.getStorageSync('type');
		this.type = roleType == 1 ? '线上商家' : '线下商家';
		this.mid = uni.getStorageSync('mid');
		this.sellerName = uni.getStorageSync('merShortName');
		this.getInfo();
		this.getSweet();
		this.getGoldenBeanTotal();
	},
	onPullDownRefresh() {
		this.getInfo();
		this.getSweet();
		this.getGoldenBeanTotal();
	},
	methods: {
		changeRole() {
			uni.reLaunch({
			    url: '/pages/rols/index'
			});
		},
		// 获取账户现金余额
		getInfo() {
			this.$u.api.getMerchantBalance({mid: this.mid}).then(res=>{
				if(res.code == 0){
					this.availableAmount = res.data.availableAmount
				}else{
					uni.showToast({
						icon:'none',
					    title: res.msg
					});
				}
			})
		},
		// 获取剩余糖果
		getSweet() {
			this.$u.api.getSweet(this.mid).then(res=>{
				if(res.code == 0){
					this.count = res.data.sweetBalance;
					this.accountState = res.data.status;
				}else{
					uni.showToast({
						icon:'none',
					    title: res.msg
					});
				}
			})
		},
		getGoldenBeanTotal() {
			this.$u.api.getGoldenBeanTotal().then(res => {
				if (res.code == 0) {
					this.goldenBeanCount = res.data
				} else {
					uni.showToast({
						icon:'none',
					    title: res.msg
					});
				}
			})
		},
		toInfo(url) {
			uni.navigateTo({
				url: url
			})
		},
		toOrder() {
			uni.navigateTo({
				url: `/pages/line/order/order`
			})
		},
		/* toAfterSale() {
			uni.navigateTo({
				url: `../order/afterSale`
			})
		} */
	}
}
</script>
<style scoped lang="scss">
	.cell-box {
		position: absolute;
		width: 100%;
		top: 53px;
	}
	.bar {
		padding-top: var(--status-bar-height);
		background-color: #357CD4;
	}
	.top-info {
		padding: 60rpx 0;
		height: 482rpx;
		width: 100%;
		background-image: url('@/static/my/bg.png');
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
		color: #FFFFFF;
	}
	.u-font-32 {
		font-size: 32rpx;
	}
	.u-font-24 {
		font-size: 24rpx;
	}
	.margin-r {
		margin-right: 10rpx;
		margin-top: 8rpx;
	}
	.base-info {
		padding: 0 60rpx;
		margin-top: 20rpx;
		margin-bottom: 40rpx;
	}
	.bus-name {
		margin-bottom: 20rpx;
	}
	.level {
		position: relative;
		
	}
	.level-img {
		position: absolute;
		right: 18rpx;
		top: 6rpx;
	}
	.level-text {
		position: relative;
		margin-left: 15rpx;
		padding: 6rpx 60rpx 6rpx 8rpx;
		background-color: #1B61E5;
		border-radius: 17rpx;
	}
	.margin-r {
		margin-right: 10rpx;
	}
	.base-info-other {
		line-height: 48rpx;
		
		.item {
			text-align: center;
		}
	}
	.base-info-btn {
		margin-top: 20rpx;
		width: 139rpx;
		height: 50rpx;
		border: 2rpx solid #A4C2E8;
		border-radius: 10rpx;
		text-align: center;
	}
	.info-content {
		box-sizing: border-box;
		margin: 28rpx 30rpx 14rpx 30rpx;
		padding: 28rpx 0 40rpx 0;
		box-shadow: 0rpx 0rpx 6rpx 4rpx rgba(180, 178, 178, 0.2);
		border-radius: 20prx;
		color: #666666;
	}
	
	.info-content-item-text{
		margin-top:33rpx;
	}
	.meun-list {
		margin: 0 30rpx 30rpx 30rpx;
		border-top-left-radius: 10rpx;
		border-top-right-radius: 10rpx;
		box-shadow: 0px 0px 6px 4px rgba(180, 178, 178, 0.2);
	}
	.cell-content{
		position: relative;
		box-sizing: border-box;
		overflow: hidden;
		border-top: 1rpx solid rgba(180, 178, 178, 0.2);
		border-right: 1rpx solid rgba(180, 178, 178, 0.2);
		border-left: 1rpx solid rgba(180, 178, 178, 0.2);
		border-bottom: 0;
	}
	.group-title {
		position: relative;
		font-size: 28rpx;
		padding: 26rpx 30rpx;
		font-size: 28rpx;
		line-height: 54rpx;
	}
	.group-title::before {
		position: absolute;
		left: 0;
		top: 50%;
		 margin-top: -7px;
		content: '';
		width: 7rpx;
		height: 28rpx;
		background-color: #2D77D2;
		
	}
	.user-box {
		position: relative;
		margin-right: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.setting {
		position: absolute;
		top: var(--status-bar-height);
		right: 30rpx;
		margin-top: 30rpx;
		/* display: flex;
		align-items: center; */
	}
	.line {
		width: 2rpx;
		height: 40rpx;
		background-color: #FFFFFF;
	}
</style>
